<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <h1 style="text-align: center">API-Report</h1>

    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <ul class="list-group">
                <li class="list-group-item"><span>失败文件/总文件个数: </span><span class="label label-primary">0 / 3 </span></li>
                <li class="list-group-item"><span>总用例数: 3</span></li>
                <li class="list-group-item"><span>成功用例数: 2</span></li>
                <li class="list-group-item"><span>失败用例个数: 1 </span></li>
                <li class="list-group-item"><span>平均响应时间: 0.25680000000000003 </span></li>
                <li class="list-group-item"><span>最小响应时间: 0.1506 </span></li>
                <li class="list-group-item"><span>最大响应时间: 0.363 </span>
                </li>
            </ul>
        </div>
        <div class="col-md-2">
        </div>
        <div class="col-md-5" style="border: 1px;">
            <div id="main" style="width: 400px;height: 300px;"></div>
        </div>
    </div>


    <div class="row">
        <table class="table">
            <caption>API 结果列表</caption>
            <thead>
            <tr>
                <th>序号</th>
                <th>所属文件</th>
                <th>用例名称</th>
                <th>用例类型</th>
                <th>用例步骤数</th>
                <th>执行结果</th>
                <th>执行时间</th>
                <th>执行信息</th>
                <th>提交人</th>
            </tr>
            </thead>
            <tbody>
            
            
            <tr class="active">
                <td>1</td>
                <td>test_login_case_template（改动）.json</td>
                <td>测试登录场景</td>
                <td>scene</td>
                <td>2</td>
                <td>False</td>
                <td>0</td>
                <td>exception：NotEqualError, method:assertCode,  message:400  ！=  299</td>
                <td>王慧</td>
            </tr>
            
            
            
            <tr class="success">
                <td>2</td>
                <td>test_superadmin_login_.json</td>
                <td>login_commuity_with_tunicorn_中文</td>
                <td>api</td>
                <td>1</td>
                <td>True</td>
                <td>0.1506</td>
                <td></td>
                <td>王慧</td>
            </tr>
            

            <tr class="success">
                <td>3</td>
                <td>test_superadmin_login_3.json</td>
                <td>测试登录场景</td>
                <td>scene</td>
                <td>2</td>
                <td>True</td>
                <td>0.363</td>
                <td></td>
                <td>王慧</td>
            </tr>
            
            

            </tbody>
        </table>
    </div>
</div>


<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var success = "2";
    var fail = "1";
    var error = "0";
    // 指定图表的配置项和数据
    var option_pie = {
        title: {
            text: '用例执行情况占比',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['成功', '失败', '异常']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: success, name: '成功'},
                    {value: fail, name: '失败'},
                    {value: error, name: '异常'}

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                         color:function(params) {
                         //自定义颜色
                         var colorList = [
                              '#00EE00',
                              '#C1232B',
                              '#F4E001'
                             ];
                             return colorList[params.dataIndex]
                          }
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option_pie);
</script>
<script>
    $(function () {
	$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>